import React from 'react'
import { useNavigate } from 'react-router-dom'
import { NavBar, Toast, } from 'antd-mobile'
import { Wechat, Checked } from '@react-vant/icons';
import { AlipaySquareFill } from 'antd-mobile-icons'
import http from '../../api/http'
import {useSearchParams} from 'react-router-dom'

function Index() {
  const navigate = useNavigate()

  // 接收参数
  const [sp] = useSearchParams()
  const price = sp.get('price');
  const title = sp.get('title');
  const id = sp.get('id');

  // 支付
  const pay = async () =>{
    // 获取支付链接
    const res = await http.get('/api/pay',{ params:{price,id,title} });
    console.log(res.data)
    const {code,data,message} = res.data;
    // 成功
    if(code===200){
      Toast.show(message)
      document.location.href = data;
    }
  }
  return (
    <div>
      {/* 导航栏 */}
      <NavBar onBack={() => navigate(-1)}>支付页</NavBar>
      <div>
        <p onClick={()=>pay()} style={{ display: 'flex', alignItems: 'center', margin: '10px' }}>
          <AlipaySquareFill fontSize={35} color='blue' />
          支付宝
        </p>
        <p style={{ display: 'flex', alignItems: 'center', margin: '10px' }}>
          <Wechat fontSize={35} color='green' />
          微信
        </p>
        <p style={{ display: 'flex', alignItems: 'center', margin: '10px' }}>
          <Checked fontSize={35} color='red' />
          云闪付
        </p>
      </div>
    </div>
  )
}

export default Index
